<template>
	<view>
		<view class="main">
			<input class="usercss" @input="getPhone" placeholder="请输入用户名/手机号" placeholder-class="plcss" />
			<view class="codecss flex">
				<input placeholder="请输入验证码" placeholder-class="plcss" @input="getValue" />
				<button class="button" :disabled="show" :style="{color:color}" @tap="getCode">{{codeValue}}</button>
			</view>
			<button class="buttoncss" @tap="Check">验证</button>
		</view>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	export default {
		data() {
			return {
				codeValue: "获取验证码",
				color: "#209FFC",
				time: 60,
				phone: '',
				show: false,
				code: ''
			};
		},
		methods: {
			getPhone(e) {
				this.phone = e.detail.value
			},
			getValue(e) {
				this.code = e.detail.value
			},
			Check() {
				let data = {
					yan: this.code,
					call: this.phone,
					api: 'smszhu',
					pid: 1
				}
				api.look(data).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: "../registerTwo/registerTwo?cell=" + this.phone
						})
					} else if (res.code == 404) {
						uni.showToast({
							title: '手机号已存在，不能重复注册',
							icon: 'none',
							success: () => {
								uni.reLaunch({
									url: '../../noteLogin/noteLogin'
								})
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//点击获取验证码
			getCode(e) {
				var that = this;
				if (that.phone == "") {
					uni.showToast({
						title: '请输入手机号',
						duration: 1000,
						icon: 'none',
					})
					return;
				}
				if (!(/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(that.phone))) {
					uni.showToast({
						title: '请输入正确手机号',
						duration: 1000,
						icon: 'none',
					})
					return;
				}
				// 60秒后重新获取验证码
				var inter = setInterval(function() {
					that.codeValue = that.time + 's后重发'
					that.time = that.time - 1
					that.color = "#E2E2E2"
					that.show = true
					if (that.time < 1) {
						clearInterval(inter)
						that.codeValue = '重新发送'
						that.time = 60
						that.color = "#2878FF"
						that.show = false

					}
				}.bind(this), 1000)
				api.look({
					call: that.phone,
					api: 'sms'
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '发送成功',
							icon: 'success',
							duration: 2000
						})
					} else if (res.code == 404) {
						uni.showToast({
							title: '手机号已存在，请勿重复注册！',
							icon: 'none',
							duration: 2000,
							success: () => {
								setTimeout(() => {
									uni.reLaunch({
										url: '../../login/login'
									})
								}, 2000)
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
	}
</script>

<style lang="scss">
	.main {
		width: 690rpx;
		margin: 0 auto;

		.usercss {
			margin-top: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1rpx solid #999;
		}

		.plcss {
			font-size: 30rpx;
			color: #999;
			padding-left: 20rpx;
		}

		.codecss {
			margin-top: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			border-bottom: 1rpx solid #999;

			input {
				width: 540rpx;
			}

			.button {
				width: 250rpx;
				height: 98rpx;
				line-height: 98rpx;
				background: #fff;
				font-size: 32rpx;
			}

			button::after {
				border: none;
			}
		}

		.buttoncss {
			width: 690rpx;
			height: 100rpx;
			background: #209FFC;
			border-radius: 50rpx;
			color: #fff;
			line-height: 100rpx;
			text-align: center;
			font-size: 40rpx;
			margin-top: 150rpx;
		}
	}
</style>
